<template>
	<u-popup v-model="visibleDialog" mode="center" width="90%" border-radius="14">
		<view style="padding: 20rpx;">
			<u-form :model="form" ref="uForm" label-width="150" :error-type="['toast']" >
				<u-form-item label="孩子姓名" prop="sysChildName">
					<u-input placeholder="请输入孩子姓名" v-model="form.sysChildName" />
				</u-form-item>
				<u-form-item label="性别" prop="gender">
					<u-input type="select" placeholder="请选择性别" v-model="form.genderStr" @click="genderShow = true"/>
				</u-form-item>
				<u-form-item label="出生年月" prop="birthday">
					<u-input type="select" placeholder="请选择出生年月" v-model="form.birthday" @click="dateShow = true"/>
				</u-form-item>
				<u-form-item label="家长姓名" prop="clienteleName">
					<u-input  placeholder="请输入家长姓名" v-model="form.clienteleName"/>
				</u-form-item>
				<u-form-item label="联系电话" prop="mobile">
					<u-input placeholder="请熟悉联系电话" v-model="form.mobile" type="number"/>
				</u-form-item>
				<u-form-item label="客户分类" prop="clienteleType">
					<u-input type="select" placeholder="请选择客户分类" v-model="form.clienteleType" @click="clienteleTypeShow = true"/>
				</u-form-item>
				<u-form-item label="意向产品">
					<!-- <u-input type="select" placeholder="请输入编号" v-model="form.eventTime" @click="productShow = true"/> -->
					<view class="time-view">
						<view v-for="(item, index) in productRecords" :key="index">
							<text>{{item.name}}</text>
							<u-icon name="trash" class="del" @click="delClick(index)"></u-icon>
						</view>
					</view>
					<u-icon slot="right" name="plus-circle" @click="productShow = true" size="48"></u-icon>
				</u-form-item>
				<u-button class="action-view" @click="saveClick">保存</u-button>
			</u-form>
			<product-add-view :visible.sync="productShow" @confirm="productConfirm"></product-add-view>
			<u-select v-model="clienteleTypeShow" :list="clienteleType" @confirm="clienteleTypeConfirm"></u-select>
			<u-select v-model="genderShow" :list="genderList" @confirm="genderConfirm"></u-select>
			<u-picker v-model="dateShow" mode="time" :params="params" @confirm="confirmTime"></u-picker>
		</view>
	</u-popup>
</template>

<script>
	import { changeClientele } from '@/api/clientele.js'
	import {
		mapState,
	} from 'vuex';
	import ProductAddView from '@/pages_operate/components/product-add-view.vue'
	import {
		formatDateByTimestamp
	} from '@/utils/utils.js'
	export default {
		components: {
			ProductAddView
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			item: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				form: {
					sysChildName: '',
					gender: '',
					genderStr: '',
					birthday: '',
					clienteleName: '',
					mobile: '',
					clienteleType: '',
					product: [],
				},
				rules: {
					sysChildName: [{
						required: true,
						message: '请填写孩子姓名',
					}, ],
					genderStr: [{
						required: true,
						message: '请选择性别',
					}, ],
					birthday: [{
						required: true,
						message: '请选择出生日期',
					}, ],
					clienteleName: [{
						required: true,
						message: '请填写家长姓名',
					}, ],
					mobile: [{
						required: true,
						message: '请填写家长联系电话',
					}, ],
					clienteleType: [{
						required: true,
						message: '请选择客户分类',
					}, ],
				},

				clienteleType: [
					{
						value: 'A',
						label: 'A类：有支付能力也有消费意愿'
					},
					{
						value: 'B',
						label: 'B类：有支付能力消费意愿一般'
					},
					{
						value: 'C',
						label: 'C类：支付能力受限消费意愿强烈'
					},
					{
						value: 'D',
						label: 'D类：无支付能力'
					}
				],
				clienteleTypeShow: false,
				
				genderShow: false,
				genderList: [
					{
						value: '1',
						label: '男'
					},
					{
						value: '0',
						label: '女'
					}
				],
				
				dateShow: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
					timestamp: true,
				},
				
				productShow: false,
				productRecords: []
			}
		},
		computed: {
			visibleDialog: {
				get() {
					return this.visible
				},
				set(val) {
					this.$emit('update:visible', val)
				}
			}
		},
		watch: {
			visible(newValue, oldValue) {
				if (newValue) {
					console.log(this.item)
					this.form.sysChildName = this.item.childName;
					this.form.gender = this.item.gender;
					this.form.birthday = formatDateByTimestamp(this.item.birthday);
					this.form.clienteleName = this.item.name;
					this.form.mobile = this.item.mobile;
				}
			}
		},
		created() {

		},
		onReady() {
			
		},
		methods: {
			post() {
				const productRecords = this.productRecords.map(x => {
					return {
						productId: x.id,
						count: x.count,
						remark: x.remark
					}
				})
				const data = {
					areaId: this.item.areaId,
					leadsId: this.item.id,
					...this.form,
					productRecords
				}
				changeClientele({ areaId: this.item.areaId },data).then(res => {
					console.log(res);
					this.$u.toast('成功转成客户')
					setTimeout( () => {
						this.$emit('success')
					}, 500);

				})
			},
			saveClick() {
				console.log(this.productRecords);
				this.$refs.uForm.setRules(this.rules);
				this.$refs.uForm.validate(valid => {
					console.log(valid);
					if (valid) {
						this.post();
						return;
					}
				});
			},
			clienteleTypeConfirm(res) {
				console.log(res)
				const item = res[0]
				this.form.clienteleType = item.value
				this.form.clienteleType = item.label
			},
			
			genderConfirm(res) {
				console.log(res)
				const item = res[0]
				this.form.gender = item.value
				this.form.genderStr = item.label
			},
			
			confirmTime(res) {
				this.form.birthday = formatDateByTimestamp(res.timestamp, 'yyyy/mm/dd');
			},
			
			productConfirm(res) {
				console.log(res);
				this.productRecords.push(res);
			},
		}
	}
</script>

<style>
</style>
